<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程记录</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0; /*响应式*/
            padding: 0;
        }

        /* 新增主容器样式 */
        .main-container {
            max-width: 100%;
            min-height: 600px;
            padding: 20px;
            /*max-width: 550px; !* 适当增大最大宽度 *!*/
            /*min-height: 600px;*/
            /*margin: 0 auto;*/
            /*padding: 20px;*/
            /*!*background: white;*!*/
            /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
            /*border-radius: 8px;*/
            /*position: relative;*/
        }

        body {
            font-family: "Nunito", sans-serif;
            background: #f5f5f5;
            color: #333;
            font-weight: 900;
            /*padding: 20px;*/
            min-width: 320px; /*设置最小宽度防止变形*/
        }

        .progress {
            width: 100%;
            max-width: 450px;
            margin: 40px auto 20px;
        }

        .progress_inner {
            height: 80px;
            width: 100%;
            position: relative;
        }

        .progress_inner__step {
            width: 33.33%;
            font-size: 12px;
            padding: 0 5px;
            transition: all 0.4s;
            float: left;
            text-align: center;
            position: relative;
        }

        .progress_inner__step label {
            padding-top: 30px;
            display: block;
            position: relative;
            cursor: pointer;
        }

        .progress_inner__step:before {
            content: "1";
            width: 24px;
            height: 24px;
            color: #2196F3;
            background: white;
            line-height: 22px;
            border: 2px solid #2196F3;
            font-size: 12px;
            top: 0;
            border-radius: 50%;
            transition: all 0.4s;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            font-weight: bold;
        }

        .progress_inner__step:nth-of-type(2):before {
            content: "2";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step:nth-of-type(3):before {
            content: "3";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step.completed:before {
            content: "✓";
            color: #4CAF50;
            border-color: #4CAF50;
            line-height: 22px;
            font-size: 14px;
        }

        .progress_inner__step.active:before {
            color: #2196F3;
            border-color: #2196F3;
            background: white;
        }

        .progress_inner__step.pending:before {
            color: #9E9E9E;
            border-color: #9E9E9E;
            background: white;
        }

        .progress_inner__bar {
            height: 3px;
            left: 16.665%;
            right: 16.665%;
            background: #E0E0E0;
            position: absolute;
            top: 12px;
            z-index: -1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress_inner__bar--progress {
            height: 100%;
            background: #4CAF50;
            width: 0;
            transition: width 0.6s ease;
        }

        .status-text {
            color: #9E9E9E;
            font-weight: normal;
            transition: all 0.4s;
            font-size: 12px;
        }

        .status-text.active {
            color: #2196F3;
            font-weight: bold;
        }

        .status-text.completed {
            color: #4CAF50;
            font-weight: bold;
        }

        .buttons {
            margin-top: 20px;
            text-align: center;
        }

        button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 3px;
            margin: 0 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 12px;
        }

        button:hover {
            background: #1976D2;
        }

        button:last-child {
            background: #9E9E9E;
        }

        button:last-child:hover {
            background: #757575;
        }

        /* 新增的流程记录样式 */
        .timeline-title {
            font-weight: bold;
            font-size: 14px;
            color: #333;
            text-align: left;
            margin: 0 0 25px 20px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            padding-bottom: 15px;
        }

        .timeline-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.5px;
            /*background: linear-gradient(to right, #e0e0e0, #a0a0a0, #e0e0e0);*/
            background: linear-gradient(to right,
            rgba(224,224,224,0.8),
            rgba(224,224,224,0.8),
            rgba(224,224,224,0.8)); /* 添加透明度使线条更柔和 */
            box-shadow: 0 0.5px 1px rgba(0,0,0,0.07);
        }

        .track-rcol {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            /*width: 450px;*/
            /*!*border: 1px solid #eee;*!*/
            /*margin: 20px auto;*/
            /*background: transparent;*/
        }
        .track-list {
            margin: 20px;
            padding-left: 5px;
            position: relative;
        }
        .track-list ul {
            padding-left: 0;
        }
        .track-list li {
            position: relative;
            padding: 5px 0 10px 25px;
            line-height: 1.4;
            border-left: 2px solid #d9d9d9;
            color: #666;
            list-style: none;
            /*text-align: left;*/
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li.first {
            color: #666;
            padding-top: 0;
            /*border-left-color: #fff;*/
        }
        .track-list li .node-icon {
            position: absolute;
            left: -7px;
            top: 18px;
            width: 8px; /* 调圆点*/
            height: 8px;
            background: #C0C0C0;
            border-radius: 50%;
            /*transform: translateY(-50%);*/
            transition: all 0.4s ease; /* 添加过渡效果 */
            border: 2px solid #E0E0E0;
            box-sizing: content-box;
            /*box-shadow: 0 0 0 2px white, 0 0 0 3px #1E90FF; !* 添加外圈效果 *!*/
        }
        .track-list li.first .node-icon {
            background: #C0C0C0; /* 天蓝色 */
            width: 8px;
            height: 8px;
            left: -8px;
            /*box-shadow: 0 0 0 2px white, 0 0 0 3px #1E90FF; !* 添加外圈效果 *!*/
        }
        .track-list li .time {
            /*margin-right: 20px;*/
            /*position: relative;*/
            /*top: 4px;*/
            /*display: inline-block;*/
            /*vertical-align: middle;*/
            display: block;
            margin-bottom: 3px;
            font-size: 11px;
            color: #888;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li .txt {
            /*max-width: 600px;*/
            /*position: relative;*/
            /*top: 4px;*/
            /*display: inline-block;*/
            /*vertical-align: middle;*/
            display: block;
            font-size: 12px;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }

        /* 悬停效果 */
        .track-list li:hover {
            color: #333;
        }
        .track-list li:hover .node-icon {
            transform: scale(1.3);
            background: #ed8088;
        }
        .track-list li:hover .time {
            color: #666;
        }

        /* 新增审核状态样式 */
        .approve-status {
            margin-top: 10px;
            text-align: center;
        }
        .approve-status label {
            margin: 0 10px;
            cursor: pointer;
        }
        .approve-status input {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div class="main-container">
<!-- 流程记录标题 - 放在左上角 -->
<div class="timeline-title">流程记录</div>

<!-- 原有的流程进度条部分 -->
<div class='progress'>
    <div class='progress_inner'>
        <div class='progress_inner__step active' id='step-1'>
            <label for='step-1'><span class="status-text active">待提交</span></label>
        </div>
        <div class='progress_inner__step pending' id='step-2'>
            <label for='step-2'><span class="status-text">待审核</span></label>
        </div>
        <div class='progress_inner__step pending' id='step-3'>
            <label for='step-3'><span class="status-text">已完成</span></label>
        </div>
        <div class='progress_inner__bar'>
            <div class='progress_inner__bar--progress' id='progress-bar'></div>
        </div>
    </div>
</div>

<!-- 流程记录内容 - 放在流程图下方 -->
<div class="track-rcol">
    <div class="track-list">
        <ul id="event-list">
            <li class="first">
                <i class="node-icon"></i>
                <span class="time" id="current-time">等待操作...</span>
                <span class="txt">[新增] - 哈尔滨信息工程学院</span>
            </li>
        </ul>
    </div>
</div>

<div class="approve-status">
    <label><input type="radio" name="approve" value="pass" checked> 审核通过</label>
    <label><input type="radio" name="approve" value="reject"> 审核未通过</label>
</div>

<div class="buttons">
    <button onclick="submitForm()">提交</button>
    <button onclick="approveForm()">审核</button>
    <button onclick="resetForm()">重置</button>
</div>
</div>

<script>
    function getCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    function addEvent(text, isFirst = false) {
        const eventList = document.getElementById('event-list');
        const li = document.createElement('li');
        if (isFirst) {
            li.className = 'first';
        }
        li.innerHTML = `
            <i class="node-icon"></i>
            <span class="time">${getCurrentTime()}</span>
            <span class="txt">${text}</span>
        `;

        // 添加动画效果
        li.style.opacity = '0';
        li.style.transform = 'translateY(20px)';
        eventList.insertBefore(li, eventList.firstChild);

        // 触发动画
        setTimeout(() => {
            li.style.opacity = '1';
            li.style.transform = 'translateY(0)';
        }, 10);
    }

    function submitForm() {
        document.getElementById('step-1').classList.remove('active');
        document.getElementById('step-1').classList.add('completed');
        document.getElementById('step-1').querySelector('.status-text').classList.remove('active');
        document.getElementById('step-1').querySelector('.status-text').classList.add('completed');

        document.getElementById('step-2').classList.remove('pending');
        document.getElementById('step-2').classList.add('active');
        document.getElementById('step-2').querySelector('.status-text').classList.add('active');
        document.getElementById('step-2').querySelector('label').setAttribute('for', 'step-2');

        document.getElementById('progress-bar').style.width = '0%';
        setTimeout(() => {
            document.getElementById('progress-bar').style.width = '50%';
        }, 100);

        // 添加流程记录
        addEvent('[提交] - 哈尔滨信息工程学院，等待审核', true);
    }

    // function approveForm() {
    //     document.getElementById('step-2').classList.remove('active');
    //     document.getElementById('step-2').classList.add('completed');
    //     document.getElementById('step-2').querySelector('.status-text').classList.remove('active');
    //     document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
    //
    //     document.getElementById('step-3').classList.remove('pending');
    //     document.getElementById('step-3').classList.add('completed');
    //     document.getElementById('step-3').querySelector('.status-text').classList.add('completed');
    //
    //     document.getElementById('progress-bar').style.width = '100%';
    //
    //     // 添加流程记录
    //     addEvent('[审核] - 哈尔滨信息工程学院，审核通过', true);
    // }
    function approveForm() {
        const isApproved = document.querySelector('input[name="approve"]:checked').value === 'pass';

        if (isApproved) {
            document.getElementById('step-2').classList.remove('active');
            document.getElementById('step-2').classList.add('completed');
            document.getElementById('step-2').querySelector('.status-text').classList.remove('active');
            document.getElementById('step-2').querySelector('.status-text').classList.add('completed');

            document.getElementById('step-3').classList.remove('pending');
            document.getElementById('step-3').classList.add('completed');
            document.getElementById('step-3').querySelector('.status-text').classList.add('completed');

            document.getElementById('progress-bar').style.width = '100%';

            // 添加流程记录
            addEvent('[审核] - 哈尔滨信息工程学院，审核通过', true);

            //延时添加完成记录
            setTimeout(() => {
                addEvent('[完成] - 恭喜完成！', false);
            })
        } else {
            // 审核未通过时，重置到待提交状态
            document.getElementById('step-1').classList.remove('completed');
            document.getElementById('step-1').classList.add('active');
            document.getElementById('step-1').querySelector('.status-text').classList.remove('completed');
            document.getElementById('step-1').querySelector('.status-text').classList.add('active');

            document.getElementById('step-2').classList.remove('active', 'completed');
            document.getElementById('step-2').classList.add('pending');
            document.getElementById('step-2').querySelector('.status-text').classList.remove('active', 'completed');
            document.getElementById('step-2').querySelector('label').setAttribute('for', 'step-2');

            document.getElementById('progress-bar').style.width = '0%';

            // 添加流程记录
            addEvent('[审核] - 哈尔滨信息工程学院，审核未通过', true);
        }
    }

    function resetForm() {
        document.getElementById('step-1').classList.remove('completed');
        document.getElementById('step-1').classList.add('active');
        document.getElementById('step-1').querySelector('.status-text').classList.remove('completed');
        document.getElementById('step-1').querySelector('.status-text').classList.add('active');

        document.getElementById('step-2').classList.remove('active', 'completed');
        document.getElementById('step-2').classList.add('pending');
        document.getElementById('step-2').querySelector('.status-text').classList.remove('active', 'completed');
        document.getElementById('step-2').querySelector('label').setAttribute('for', 'step-2');

        document.getElementById('step-3').classList.remove('completed');
        document.getElementById('step-3').classList.add('pending');
        document.getElementById('step-3').querySelector('.status-text').classList.remove('completed');

        document.getElementById('progress-bar').style.width = '0%';

        // 重置流程记录
        const eventList = document.getElementById('event-list');
        eventList.innerHTML = `
            <li class="first">
                <i class="node-icon"></i>
                <span class="time">${getCurrentTime()}</span>
                <span class="txt">流程已重置，请重新开始</span>
            </li>
        `;
        // 重置审核状态为通过
        document.querySelector('input[value="pass"]').checked = true;
    }

    document.addEventListener('DOMContentLoaded', function () {
    // 初始化显示当前时间
    document.getElementById('current-time').textContent = getCurrentTime();
    });
</script>
</body>
</html>